<template>
  <div class="search-navbar-wrapper">
    <van-nav-bar :title="name">
      <template #left>
        <div class="new-bar-left">
          <div class="new-left-back new-nav-bar" @click="toBack"></div>
          <div class="new-left-home new-nav-bar" @click="toHome"></div>
        </div>
      </template>
      <template #right>
        <div class="new-bar-right">
          <div class="new-right-search new-nav-bar" @click="toSearch"></div>
          <van-cell
            @click="showPopup"
            show-arrow="false"
            close-on-popstate="true"
            class="new-nav-bar new-right-more"
          >
          </van-cell>
          <van-popup
            v-model:show="show"
            position="bottom"
            :style="{ height: '85%' }"
            closeable
            click="closePopup"
          >
            <div class="tab-pop-content-box">
              <div class="tab-pop-content-title">全部频道</div>
              <div class="tab-pop-content">
                <template v-for="item of tabbarsList" :key="item.id">
                  <div class="tab-pop-content-item">
                    <div @click="toTabbars(item.url)">
                      {{ item.name }}
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </van-popup>
          <!-- </div> -->
        </div>
      </template>
    </van-nav-bar>
  </div>
</template>

<script >
import { ref } from "vue";
import { useRouter } from "vue-router";

  
    
    
  

// import PopupComponent from "@/components/common/PopupComponent/index.vue";
export default {
  props: {
    name: {
      type: String,
      required: true,
      default: "搜索",
    },
  },
  setup() {
    const router = useRouter();
    const tabbarsList = ref([
      {
        name: "首页",
        id: 0,
        url: "/home",
      },
      {
        name: "车友圈",
        id: 1,
        url: "/carFriends",
      },
      {
        name: "选车",
        id: 2,
        url: "/chooseCar",
      },
      {
        name: "服务",
        id: 3,
        url: "/service",
      },
    ]);
    const toBack = () => {
      router.go(-1);
    };
    const toHome = () => {
      router.push("/home");
    };
    const toSearch = () => {
      router.push({ path: "/search" });
    };
    const toTabbars = (pathname) => {
      router.push({ path: pathname});
    };
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    const closePopup = () => {
      show.value = false;
    };
    return {
      tabbarsList,
      show,
      toBack,
      toHome,
      toSearch,
      toTabbars,
      showPopup,
      closePopup,
    };
  }
};
</script>

<style lang="scss" scope>
.search-navbar-wrapper {
  height: 48vw/375 * 100;
  /* display: flex;
    justify-content: center; */
  .new-nav-bar {
    display: inline-block;
    width: 48vw/375 * 100;
    height: 48vw/375 * 100;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transform: scale(0.5);
  }
  .new-bar-left {
    .new-left-back {
      background: url();
    }
    .new-left-home {
      background: url();
    }
  }
  .new-bar-right {
    .new-right-search {
      background: url();
    }
    .new-right-more {
      background: url();
    }
    .tab-pop-content-box {
      .tab-pop-content-title {
        height: 48vw/375 * 100;
        line-height: 48vw/375 * 100;
        padding: 0 48vw/375 * 100;
        text-align: center;
        font-size: 16vw/375 * 100;
      }
      .tab-pop-content {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 10vw/375 * 100;
        row-gap: 10vw/375 * 100;
        justify-content: center;
        align-items: center;
        padding: 12vw/375 * 100;
        text-align: center;
        .tab-pop-content-item {
          height: 40vw/375 * 100;
          line-height: 40vw/375 * 100;
          background-color: rgba(242, 244, 250);
        }
      }
    }
  }
}
</style>